<template>
    <div class="HomeWork_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="$router.go(-1)">
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>群组/成员</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" />
                </div>
            </TitleMenu>
        </div>
        <div id="groupAdd_content">
            <a-row id="groupAdd_title_row">
                <a-col :span="3" id="groupAdd_change_ico">
                    <div @click="$router.push('/groupMember')">取消</div>
                </a-col>
                <a-col :span="15" id="groupAdd_name_col">
                    创建临时群组
                </a-col>
                <a-col :span="6" id="groupAdd_add_col">
                    <el-button type="success" icon="el-icon-phone"  class="callButtonClass" @click="createTempChannel">
                        <span v-if="groupUsers.length<2">单呼</span>
                        <span v-else>群呼</span>
                    </el-button>

                    <!--<Button type="success" icon="ios-call" class="callButtonClass" @click="createTempChannel">
                        <span v-if="groupUsers.length<2">单呼</span>
                        <span v-else>群呼</span>
                    </Button>-->
                </a-col>
            </a-row>
            <a-row id="groupAdd_search_row" >
                <a-col :span="22" :push="2" id="groupMember_search_col">
                    <div class="search_input">
                        <a-input placeholder="搜素用户名或对讲编号" style="width:75vw;height: 13vw;background: rgb(235,235,235);font-size: 5vw"/>
                    </div>
                    <div class="search_ico">
                        <a-icon type="search" style="font-size: 8vw" />
                    </div>
                </a-col>
            </a-row>
            <!--创建群组的用户列表显示-->
            <ul id="groupMemberAdd_ul"  v-scroll="onScroll">
                <li class="groupMember_li" v-if="channelUserList[0].uid!==''" v-for="item in channelUserList">
                    <a-row class="groupMemberAdd_ul_row">
                        <a-col :span="4" class="groupMember_li_left">
                            <div class="groupMember_li_ico">
                                <img src="../../assets/drawable-mdpi/avatar.png" width="51" height="50">
                            </div>
                        </a-col>

                        <a-col :span="15" class="groupMember_li_center">
                            <div class="groupMember_li_topText">
                                {{item.name||item.nick}}
                            </div>
                            <div class="groupMember_li_bottomText">
                                {{item.uid}}
                            </div>
                        </a-col>

                        <a-col :span="5" class="groupMember_li_right">
                            <div class="groupMember_li_rightText_add">
                                <input type="checkbox" style="zoom: 140%" v-model="groupUsers" :value="item.uid" /> {{item.currentChannelId | isOnline}}
                            </div>
                        </a-col>
                    </a-row>
                </li>
            </ul>
        </div>
        <FooterChaanel v-if="isShowFooter===true"></FooterChaanel>
    </div>
</template>
<style>
    .callButtonClass{
        padding: 0 1vw 0 1vw !important;
        line-height: 8vw !important;
        height: 9vw !important;
        margin-bottom: 0.75vw !important;
        font-size: 5vw !important;
        /*background: rgb(235,235,235) !important;*/
        /*color: red !important;*/
    }
    .groupMember_li_rightText_add{
        font-size: 5vw;
        padding-right: 1vw;
    }
    #groupAdd_content{
        width: 100vw;
        background: rgb(237,237,237);
        height: calc(100vh - 66.25vw);
    }

    #groupAdd_title_row{
        width: 100vw;
        height: 11.25vw;
       padding:0 2vw 0 2vw;
    }
    #groupAdd_change_ico{
        height: 11.25vw;
        line-height: 11.25vw;
        font-size: 6vw;
        color:black;
        font-family: "Microsoft YaHei";
    }
    #groupAdd_add_col{
        height: 11.25vw;
        line-height: 11.25vw;
        font-size: 6vw;
        color: darkred;
        font-family: "Microsoft YaHei";
        margin-top: -0.5vw;
    }

    #groupAdd_name_col{
        height: 11vw;
        font-size: 6vw;
        line-height: 11vw;
        font-family:Microsoft YaHei,serif;
    }

    #groupAdd_search_row{
        height: 13.75vw;
        line-height: 13.75vw;
        text-align: center;
    }
    #search_input input{
        height: 10vw;
        line-height: 10vw;
        background: white;
        border-radius: 2vw;
    }
    #groupMemberAdd_ul{
        padding: 1vw 2vw 0 2vw;
        margin: 0;
        overflow: scroll;
        height: calc(100vh - 91vw);
    }
</style>
<script>
    import TitleTop from '../../components/TitleTop'
    import TitleMenu from '../../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../../components/FooterChaanel";
    export default {
        name: "GroupAdd",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        data() {
            return {
                msg: 'hello vue',
                isShowFooter:true,
                channelUserList : [{"uid":"","name":"","currentChannelId":null,"nick":""}],
                groupUsers:[],//选择的复选框的绑定值
                currMember:this.$store.state.intercomList.memberManage.currMember,
            }
        },
        mounted(){
            this.getChannelUserList();
            window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
            window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
        },
        methods:{
            keyboardShowHandler(e){
                /*console.log(e.keyboardHeight);*/
                this.isShowFooter = false;

            },
            keyboardHideHandler(e){
                this.isShowFooter = true;
            },
            onScroll(){
                this.handleScroll;
            },
            getChannelUserList(){
                let pageIndex = 1;
                let pageSize = 100000;
                this.$apiIntercom.getChannels(pageIndex,pageSize).then(result => {
                    let data = result.data;
                    console.log("data",data);
                    if (data.code === 200) {
                    }else{
                        return;
                    }
                }).catch(e =>{
                    console.log(e);
                });

                this.$apiIntercom.getALLUsers(pageIndex,pageSize).then(result => {
                    let data = result.data;
                    if (data.code === 200) {
                        let allUserList =  data.userlist ;
                        let currMemberIndex = allUserList.findIndex(f=> f.uid === this.currMember.iId);
                        if(currMemberIndex>-1){
                            allUserList.splice(currMemberIndex,1);
                            this.channelUserList = allUserList;
                        }
                    }else{
                        return;
                    }
                }).catch(e =>{
                    console.log(e);
                });
            },
            createTempChannel(){
                let me = this;
                let members = me.currMember.iId+",";
                me.groupUsers.forEach(f=>{
                    members +=f+",";
                });
                members = members.substr(0, members.length - 1);//去掉末尾的逗号
                let success = function(result){
                    console.log(result);
                    me.$router.push('/groupMember');
                };
                let fail = function(e){
                    console.log(e);
                    me.$toast("创建临时频道失败","short","bottom",-80);
                };
                let options = {
                    title:"",
                    pwd:"",
                    members:members,
                    searchable:false,
                    needapplyChecked: false,
                    tmp:true,//默认不为临时频道
                };
                if(typeof (Intercom)!=="undefined"){
                    Intercom.createChannel(success,fail,options);
                }else{
                    console.log("members:",members);
                    me.$router.push('/groupMember');
                }

            },
        },
        filters: {
            isOnline(value) {
                if (value >-1) {
                    value = "在线";
                }else{
                    value = "离线";
                }
                return value;
            },
        }
    }
</script>

